<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>上传影视资源</title>

		<link rel="stylesheet" href="./bootstrap-4.6.1-dist/css/bootstrap.min.css" />

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
		<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
			rel="stylesheet">
		<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<style>
			body {
				background: url("./img/灰色1.jpg") no-repeat fixed 0 0;
				margin: 0 auto;
				background-size: cover;
				width: 100%;
				height: 100%;

			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			var response;
			response = confirm("id:失去焦点自动输入 注意上传的影视信息内容");
		</script>
		<fieldset style="position: relative;top: 25pt;left: 50pt;">上传影视资源</fieldset>
		<form action="#" class="form-inline" style="position: relative; top:50pt;">
			<!-- id -->
			<div class="col-md-12 form-group mb-2 mt-2">
				<label for="filmid" class="col-sm-3 col-form-label" style="color: azure;">Film_Id</label>
				<input type="text" class="col-sm-2" id="filmid" placeholder="enter film id" required value="">
			</div>

			<!-- type -->
			<div class="col-md-12 form-group mb-2 ">
				<label class="col-sm-3 form-label" style="color: azure;">Film_Type</label>
				<select name="type" id="filmtype" class="control-input custom-select col-md-4" required value="">
					<option value="喜剧">喜剧</option>
					<option value="爱情">爱情</option>
					<option value="战争">战争</option>
				</select>
			</div>


			<!-- film name -->
			<div class="col-md-12 form-group mb-2 ">
				<label class="col-sm-3 col-form-label" for="filmname" style="color: azure;">Film_Name</label>
				<input type="text" class="form-control col-sm-9" id="filmname" required placeholder="enter film name"
					value="">

			</div>
			<!-- img url -->
			<div class="col-md-12 form-group mb-2 ">
				<label class="col-sm-3 col-form-label" for="filmimgurl" style="color: azure;">Film_Img_Url</label>
				<input type="text" class="form-control col-sm-9" id="filmimgurl" required
					placeholder="enter film img url" value="">

			</div>

			<!-- film url -->
			<div class="col-md-12 form-group mb-2 ">
				<label class="col-sm-3 col-form-label" for="filmplayurl" style="color: azure;">Film_Play_Url</label>
				<input type="text" class="form-control col-sm-9" id="filmplayurl" required
					placeholder="enter film play url " value="">

			</div>
			<!-- meaaage -->
			<div class="col-md-12 form-group mb-2 ">
				<label class="col-sm-3 control-label" for="filmmessage" style="color: azure;">Film_Message</label>
				<textarea name="filmmessage" id="filmmessages" class="form-control col-sm-9" rows="3"
					placeholder="enter message" required value="">

				</textarea>

			</div>

			<div class="col-md-12 form-group mb-2">
				<div class="col-sm-9 offset-sm-3">
					<input type="submit" id="submit" class="btn btn-secondary" value="Submit">
					<input id="reset" type="reset" class="btn btn-secondary" value="Reset">
				</div>

			</div>

		</form>



		<!-- 	上传表单的信息  一id的获取  ，name的验证是否重复， 上传数据-->
		<script src="./js/jquery-3.6.1.js"></script>
		<script src="./bootstrap-4.6.1-dist/js/bootstrap.bundle.js"></script>

		<script>
			$("#filmid").blur(function() {
				$.ajax({
					url: "http://127.0.0.1:8080/returnfilmid",
					type: "GET",
					success: function(result) {

						$("#filmid").val(result);
						console.log(result);
						console.log(" video—id 已返回！");

					},
					error: function(err) {
						console.log(err);
					},
				});
			});


			$("#filmname").blur(function() {

				var filmnamed = $("#filmname").val();

				$.ajax({
					url: "http://127.0.0.1:8080/checkfilmname",
					data: {
						name: filmnamed
					},
					type: "get",
					dataType: "json",
					success: function(result) {

						if (result == true) {
							window.alert("电影名字重复！请重新输入电影信息");
							$("#reset").click();
						}
					},
					error: function(err) {
						console.log(err);
					},

				});
			});


			$("#submit").click(function() {

				var id1 = $("#filmid").val();
				var typefilm = $("#filmtype").val();
				var filmnamed1 = $("#filmname").val();
				var iul = $("#filmimgurl").val();
				var vurl = $("#filmplayurl").val();
				var me = $("#filmmessages").val();
				$.ajax({
					url: "http://127.0.0.1:8080/savefilm",
					data: {
						fid: id1,
						type: typefilm,
						name: filmnamed1,
						videourl: vurl,
						message: me,
						imgurl: iul
					},
					type: "post",
					dataType: "json",
					success: function(result) {


					},
					error: function(err) {
						console.log(err);
					},

				});

			});
		</script>






	</body>
</html>
